<template>
	<view class="pageItem">
		<view class="main">
			<view class="row">
				<view class="r_tit">
					<view class="txt">{{$t('set.question_title')}}<label class="need">*</label></view>
					<view class="tip">{{question.length || 0}}/100</view>
				</view>
				<view class="card">
					<textarea class="c_input long_input" maxlength="100" v-model="question" :placeholder="$t('use.no_txt_tip')" placeholder-class="input_no_txt"></textarea>
				</view>
			</view>
			<view class="row">
				<view class="r_tit">
					<view class="txt">{{$t('set.contact')}}<label class="need">*</label></view>
				</view>
				<view class="card">
					<input class="c_input" v-model="cantact" :placeholder="$t('use.no_txt_tip')" placeholder-class="input_no_txt"/>
				</view>
			</view>
		</view>
		<view class="_footer">
			<view class="btn sub" @click="to_back">{{$t('use.save')}}</view>
		</view>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				question:'',
				cantact:''
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods:{
			to_back(){
				if(!this.hasLogin){
					this.showMsg(this.$t('system.tip4'));
					return false;
				}
				if(this.question == '' || question.length < 20){
					 this.showMsg(this.$t('system.tip8'));
					 return false;
				}
				if(this.cantact == ''){
					this.showMsg(this.$t('system.tip9'));
					return false;
				}
				uni.$u.throttle(this.real_back, 1500)
			},
			real_back(){
				let url = this.site_url + 'api/auth/member/feedback_handle';
				let param = {
					links : this.cantact,
					msg : this.question
				};
				uni.showLoading({
					mask: true
				});
				helper.Timer.start();
				this.areq(url,param,'POST').then(res=>{
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(2000);
					setTimeout(()=>{
						uni.hideLoading();
						if(res.code == 1){
							this.showMsg(this.$t('system.tip33'), 2000, true, 'success');
							setTimeout(() => {
								this.backTo();
							}, 1500)
						}else{
							this.showMsg(res.msg);
						}
					},left_time);	
					
				})
				
				
			}
			
		}
	}
</script>

<style lang="scss">
.main{
	width: 100%;
	padding: 4vw 4% 0;
	.row:not(:first-of-type){
		margin-top: 6vw;
	}
	.row{
		width: 100%;
		color: $main_color5;
		.r_tit{
			width: 100%;
			display: flex;
			align-items: center;
			padding-bottom: 3vw;
			.txt{
				flex: 1;
				font-size: 3.6vw;
				font-weight: bold;
				display: flex;
				align-items: center;
				.need{
					color: #ff260a;
					padding-left: 1vw;
					padding-top: 1vw;
				}
			}
			.tip{
				font-size: 3.6vw;
			}
		}
		.card{
			@include card_style();
			.c_input{
				line-height: 6vw;
				font-size: 3.8vw;
			}
			.long_input{
				height: 30vw;
			}
		}
	}
}
._footer{
	@include page_button();
	margin-top: 15vw;
}
</style>
